import React from 'react';
import { Modal, Button, message } from 'antd';
import { DownloadOutlined, CloudUploadOutlined } from '@ant-design/icons';
import './styles.scss';

interface ImportProductModalProps {
  visible: boolean;
  onCancel: () => void;
  onOk: (products: any[]) => void;
}

const ImportProductModal: React.FC<ImportProductModalProps> = ({
  visible,
  onCancel,
  onOk,
}) => {
  const handleDownloadTemplate = () => {
    // TODO: Implement template download
    message.success('模板下载成功');
  };

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      // TODO: Implement file upload and parsing
      message.success('文件上传成功');
      onOk([]);
    }
  };

  return (
    <Modal
      title="导入商品"
      open={visible}
      onCancel={onCancel}
      footer={null}
      width={600}
      className="import-product-modal"
    >
      <div className="import-content">
        <div className="import-section">
          <h3>1. 下载模板</h3>
          <div className="template-download">
            <div className="download-icon">
              <DownloadOutlined />
            </div>
            <div className="download-text">
              点击下载模板
            </div>
            <Button 
              type="primary" 
              icon={<DownloadOutlined />}
              onClick={handleDownloadTemplate}
            >
              下载Excel模板
            </Button>
          </div>
        </div>

        <div className="import-section">
          <h3>2. 上传文件</h3>
          <div className="file-upload">
            <div className="upload-icon">
              <CloudUploadOutlined />
            </div>
            <div className="upload-text">
              点击或将文件拖拽到这里上传
            </div>
            <div className="upload-tip">
              支持扩展名：.xlsx
            </div>
            <input
              type="file"
              accept=".xlsx"
              onChange={handleFileUpload}
              className="file-input"
            />
          </div>
        </div>

        <div className="import-guide">
          导入指引：
          <ol>
            <li>下载Excel模板；</li>
            <li>填写Excel表格，填写内容必须按照模板内容格式；</li>
            <li>选择填写好的Excel文件上传 --&gt; 系统检查 --&gt; 导入成功！</li>
            <li>单次导入建议100条商品，商品多可以分多个单据导入后导入。</li>
          </ol>
        </div>
      </div>
    </Modal>
  );
};

export default ImportProductModal; 